<template>
    <div class="town">
        <h3 class="title">
            <span>各乡镇实况温度排名</span>
            <div class="err">
                <p @click="changeDirection('up')">
                    <img v-show="direction=='down'" src="../../../../../static/images/actuallyMonitor/up.png" alt="">
                    <img v-show="direction=='up'" src="../../../../../static/images/actuallyMonitor/down.png" alt="">
                </p>
                <p @click="changeDirection('down')">
                    <img v-show="direction=='up'" src="../../../../../static/images/actuallyMonitor/up.png" alt="">
                    <img v-show="direction=='down'" src="../../../../../static/images/actuallyMonitor/down.png" alt="">
                </p>
            </div>
        </h3>
        <ul class="rank">
            <li v-for="(item,index) of rankes" :key="index" :style="{'background-image':'url(../../../../../static/images/actuallyMonitor/'+(index+1)+'.png)'}">
                <span v-show="index<3" style="font-size:2.2rem;display:block;margin:1.5rem 0 1rem 0;">{{item.value}}℃</span>
                <span v-show="index<3" style="color:#fff">{{item.name}}</span>
                <span v-show="index>2" style="color:#fff;display:block;margin:.8rem 0 .8rem 0">{{item.name}}</span>
                <span v-show="index>2" style="font-size:1.2rem;">{{item.value}}℃</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props:['compFlag'],
    watch:{
        compFlag(newval){
            this.title = newval=='tem'?'各乡镇实况温度排名':'近24h乡镇降雨量排名'
        }
    },
    data(){
        return{
            title:'',
            direction:'down',//排序
            rankes:[
                {name:'大同镇',value:16},
                {name:'乾潭镇',value:15},
                {name:'三都镇',value:14},
                {name:'藤桥镇',value:13},
                {name:'泽雅镇',value:12},
                {name:'大门镇',value:11},
                {name:'塘下镇',value:10.2},
                {name:'陶山镇',value:10.1},
                {name:'桐浦镇',value:9.2},
            ]
        }
    },
    methods:{
        changeDirection(direction){//升序降序
            this.direction = direction
            let up = (val,direction)=>{
                return (m,n)=>{
                    return direction=='up'?m[val] - n[val]:n[val] - m[val]
                }
            }
            this.rankes.sort(up('value',this.direction))
        }
    }
}
</script>
<style lang="scss" scoped>
    .town{
        width:98%;
        height:100%;
        display:flex;
        flex-direction: column;
        background-image: url('../../../../../static/images/actuallyMonitor/bar.png');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        .title{
            line-height:2.4rem;
            letter-spacing: .2rem;
            font-size:1.2rem;
            height:2.4rem;
            border:.1rem solid rgba(48, 138, 199, 0.5);
            box-shadow: 0rem 0rem .5rem .1rem rgba(48, 138, 199, 0.5) inset;
            width:100%;
            margin-bottom:1.5rem;
            text-align:left;
            padding-left:1rem;
            box-sizing: border-box;
            position: relative;
            .err{
                position:absolute;
                right:0;
                top:0;
                height:100%;
                width:4rem;
                display:flex;
                flex-direction: column;
                p{
                    flex:1;
                    border:.1rem solid rgba(48, 138, 199, 0.5);
                    box-shadow: 0rem 0rem .5rem 0rem rgba(48, 138, 199, 0.5) inset;
                    text-align:center;
                    line-height:1rem; 
                    cursor:pointer; 
                    img{
                       height:80%;        
                    }
                    &:nth-child(1){
                        img{
                            &:nth-child(2){
                                transform:rotate(180deg)
                            }  
                        }
                    }
                    &:nth-child(2){
                        img{
                            &:nth-child(1){
                                transform:rotate(180deg)
                            }  
                        }
                    }
                }
            }
        }
        .rank{
            flex:1;
            display:flex;
            flex-wrap: wrap;
            li{
                width:32%;
                background-repeat: no-repeat;
                background-size:100% 100%;
                margin:0 2% 2% 0;
                text-align:center;
                &:nth-child(3n){
                    margin-right: 0;
                }
                &:nth-child(-n+3){
                    height:7rem;
                }
                &:nth-child(n+4){
                    height:4.3rem;
                }
            }
        }
    }
</style>